/*
 * 监控区主页的主要内容区, 在顶端栏下方
 * 需要依赖 Vue
 * @author Zdream
 * @since 0.2.0
 */

monitor.ui.body = {
		
	/**
	 * 存储哪类屏幕（后面版本的组）对应的 HTML 的位置.
	 * 映射关系: string - string
	 * 
	 * key: string
	 *   它由以下的方式确定:
	 *   1. 侧边栏的选择
	 *   2. 顶端栏的选择
	 *   
	 *   因此, key 所使用的字符串就是这样拼接的:
	 *     aside + ":" + top
	 *   
	 *   其中, aside 是侧边栏提供的参数:
	 *   1. 当侧边栏选中【概况】时, aside = "general"
	 *   2. 当侧边栏选中【设置】时, aside = "setting"
	 *   3. 当侧边栏选中某一个屏幕时, aside = "project" 或 "project-" + pid
	 *      取决于该播放的 project 有没有对应的定制监控器.
	 *      如果有, 则按 "project-" + pid 来查找
	 *      如果没有, 按 "project" 作为 aside 的值
	 *   TODO 现在并没有完成选择功能, 所以全是 "project"
	 *      
	 *   第二, top 的值. 即 top 的选择值, monitor.ui.top.selected
	 * 
	 * value: string
	 *   指应该加载的网页位置
	 */
	loadhtmls : {
		"general:0" : '/html/monitor/body-general.html',
		"setting:0" : '/html/monitor/body-setting-main.html',
		"setting:playList" : '/html/monitor/body-setting-playList.html',
		"project:0" : '/html/monitor/body-project-main.html',
		"project:playList" : '/html/monitor/body-project-playList.html'
	},
	
	loadjs : {
		"general:0" : '/js/monitor/content/content-general.js',
		"setting:0" : '/js/monitor/content/content-setting-main.js',
		"setting:playList" : '/js/monitor/content/content-setting-playList.js',
		"project:0" : '/js/monitor/content/content-project-main.js',
		"project:playList" : '/js/monitor/content/content-project-playList.js'
	},
	
	namespace : {
		"general:0" : 'general',
		"setting:0" : 'setting-main',
		"setting:playList" : "setting-playList",
		"project:0" : 'project-main',
		"project:playList" : 'project-playList'
	},
	
	/*
	 * 现在的内容
	 */
	curContent: null,
	
	addContent : function (c) {
		var name = c.name;
		if (typeof(name) == 'string') {
			monitor.ui.content[name] = c;
		}
	},
	
	init : function() {
		// subcribe
		var thiz = this;
		monitor.msgCenter.subscribe(
				["top-selected", "window-onload"],
		function(event, argv) {
			switch (event) {
			case "top-selected": {
				thiz.onTopSelected(argv);
			} break;
			case "window-onload": {
				// init ui
				/*thiz.onAsideSelected({type:'general'});
				thiz.release("top-selected", {
					aside : 'general', // 事件 aside-selected: type
					top : '0'
				});*/
			} break;
			}
		});
	},
	
	/**
	 * 替换内容栏有以下 6 个步骤
	 * 1. vm.destroy (在各自的 content.destroy 中)
	 * 2. 删除原有的消息监听 (在各自的 content.destroy 中)
	 * 3. 加载新的 HTML
	 * 4. 加载新的 JS
	 * 5. 补充消息监听 (在各自的 content.init 中)
	 * 6. vm.mount (在各自的 content.init 中)
	 */
	onTopSelected : function(data) {
		var key = this.chooseKey(data);
		if (this.curContent != null) {
			this.curContent.destroy();
		}
		
		var thiz = this;
		Promise.all(
			[
				new Promise(function(resolve, reject) {
					if (key != null && thiz.loadjs[key] != null) {
						$.getScript(thiz.loadjs[key], function(){resolve();});
					} else {
						reject();
					}
				}),
				new Promise(function(resolve, reject) {
					if (key != null && thiz.loadhtmls[key] != null) {
						$("#mnt_body").load(thiz.loadhtmls[key], function(){resolve();});
					} else {
						reject();
					}
				})
			]
		).then(function () {
			thiz.curContent = monitor.ui.content[thiz.namespace[key]];
			thiz.curContent.init(data);
		});
	},
	
	chooseKey : function(data) {
		switch (data.aside) {
		case "general":
			return "general:0";
		case "setting":
			switch (data.top) {
			case 0:
				return "setting:0";
			case "playList":
				return "setting:playList";
			}
			return "setting:0";
		case "screen":
			switch (data.top) {
			case 0:
				return "project:0";
			case "playList":
				return "project:playList";
			}
		}
		
		return null;
	}
};

monitor.ui.content = {};

monitor.ui.body.init();
